<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="lib/js/vue.js" type="text/javascript" charset="utf-8"></script>

    <script src="lib/js/vue-router.js" type="text/javascript"></script>

</head>

<style>
    .myclass{
        font-size: 20px;
        color: #00ee00;
    }

    /* 动画 */
    .v-enter,
    .v-leave-to{
        opacity: 0;
        transform: translateX(100px);
    }
    .v-enter-active,
    .v-leave-active{
        transition: all .5s ease;
    }
</style>
<body>
<div id="app">
    <router-link to="/login" tag="span">登录</router-link>
    <router-link to="/register">注册</router-link>

    <transition mode="out-in">
        <router-view></router-view>
    </transition>


</div>
<script>
    var login = {
        template:'<h1>登录组件</h1>'
    }

    var register = {
        template:'<h1>注册组件</h1>'
    }


    var routeObj = new VueRouter({
       // 这个配置对象中的route 表示 路由匹配规则的意思
        routes : [
            // 路由匹配规则
            // 每个路由规则，都是一个对象，这个对象身上，有两个必须的属性
            // 属性1：path——表示监听 那个路由链接地址
            // 属性2:component——表示，如果路由是前面匹配到的path，则展示component属性对应的组件
            {path:'/',redirect:'/login'},
            {path:'/login',component:login},
            {path:'/register',component:register}
        ],
        linkActiveClass:'myclass'
        //linkActiveClass:'router-link-active'//默认就是这个哦
    });

    // 创建一个vue实例
    new Vue({
        el:'#app',
        data:{
            msg:'信息'
        },
        methods:{

        },
        router:routeObj // 将路由规则对象，注册到vm实例上，用来监听URL地址变化，然后展示对应的组件
    })
</script>
</body>
</html>
